<template>
	<view style="background-color: white">
		<!-- 基础表单校验 -->
		<up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
			<view class="form_part">
				<up-form-item label="反馈类型" prop="text" border-bottom @click="showOrCancel">
					<up-input placeholder="请选择反馈的类型" border="none" v-model="form.text" disabled
						disabledColor="#fff"></up-input>
					<template v-slot:right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="联系手机号" prop="contactPhone" border-bottom>
					<up-input type="number" maxlength="11" placeholder="请输入要联系的手机号" border="none"
						v-model="form.contactPhone"></up-input>
				</up-form-item>
				<up-form-item label="反馈内容" prop="content">
					<up-textarea placeholder="请输入要反馈的内容" count v-model="form.content"></up-textarea>
				</up-form-item>
			</view>
		</up-form>
		<up-picker :show="show" :columns="columns" keyName="label" title="请选择反馈的类型" @cancel="showOrCancel"
			@confirm="Select"></up-picker>
	</view>
	<view class="form_button">
		<up-button type="primary" @click="submit">提交</up-button>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { addFeedback } from '../../../api/complaint'


/* 数据 */
const formRef = ref(null)
const uToastRef = ref(null)
const show = ref(false)
// 表单数据
const form = reactive({
	text: '',
	type: '',
	contactPhone: '',
	content: ''
})
// 表单校验
const rules = reactive({
	text: {
		type: 'string',
		required: true,
		message: '请选择反馈类型',
		trigger: ['blur', 'change']
	},
	content: {
		type: 'string',
		required: true,
		message: '请填写要反馈的内容',
		trigger: ['blur', 'change']
	},
	contactPhone: [{
		type: 'string',
		required: true,
		message: '请填写手机号',
		trigger: ['blur', 'change'],

	},
	{
		pattern: /(^1[3-9][0-9]{9}$)/g,
		message: '手机格式错误',
		trigger: ['blur', 'change']
	}]
})
// 选择器数据
const columns = ref([
	[{
		id: 1,
		label: '业务咨询'

	},
	{
		id: 2,
		label: '举报投诉'

	},
	{
		id: 3,
		label: '结果反馈'

	},
	{
		id: 4,
		label: '其他'

	}]
])



/* 方法 */
// 显示选择器
const showOrCancel = () => {
	show.value = !show.value
}
// 选择器确认
const Select = (e) => {
	form.text = e.value[0].label
	form.type = e.value[0].id
	showOrCancel()
}
// 提交
const submit = async () => {
	let valid = await formRef.value.validate()
	if (valid) {
		uToastRef.value.show({
			message: '正在提交反馈',
			type: 'loading',
			duration: -1
		})
		let res = await addFeedback(form)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: 'top',
				message: '您已成功提交反馈',
				type: 'success',
				duration: 1000,
				complete(){
					uni.navigateBack()
				}
			})
		}
	}
}

</script>

<style scoped>
.form_part {
	background-color: #fff;
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.form_button {
	margin-left: 5%;
	width: 90%;
}

.TranOut {
	display: flex;
	justify-content: space-between;
	padding: 0 10px 45px 10px;
	color: royalblue;
	letter-spacing: 1px;
}

.allSmall {
	font-size: 12px;
}

.allLarge {
	font-size: 15px;
}
</style>